<template>
	<view>
		<!-- navbar -->
		<van-nav-bar @click-left="$back" left-arrow title="充值中心" :border="false" title-class="custom-navbar-title" />
		<!-- scroll-view -->
		<scroll-view scroll-y :style="{height: height, backgroundColor: '#ffffff'}">
			<!-- charge-box -->
			<view class="charge-box">
				<!-- title -->
				<view class="charge-title">
					<text>账号充值</text>
				</view>
				<!-- charge-money -->
				<view class="charge-money" v-for="(item, index) in kindsList" :key="index">
					<template v-for="(item1, index1) in item">
						<view @tap="key = item1.key" :class="['charge-money-item', item1.key === key ? 'active' : null]" :key="index1" v-if="item1.money>0">
							<view class="charge-money-12">
								<text class="charge-money-1">{{item1.money}}</text>
								<text class="charge-money-2">元</text>
							</view>
							<view class="charge-money1" v-if="item1.money1 !== 0">
								<text>送{{item1.money1}}元</text>
							</view>
						</view>
						<view class="charge-money-item" style="border: none;" v-else/>
						<view style="width: 32rpx;"/>
					</template>
				</view>
				<!-- charge btn -->
				<view style="padding-top: 72rpx;;padding-right: 32rpx;">
					<van-button color="#ee0a24" type="primary" block round size="large">立即支付</van-button>
				</view>
				<view class="charge-history" @tap="toPage">
					<text>查看充值记录</text>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 充值种类 money充值金额 money1 赠送今个 key 当前标识
				kindsList: [
					[{money: '500.00', money1: 0, key: 500}, {money: '1000.00', money1: '100.00', key: 1000}],
					[{money: '2000.00', money1: '220.00', key: 2000}, {money: '3000.00', money1: '350.00', key: 3000}],
					[{money: '5000.00', money1: '600.00', key: 5000}, {money: 0, money1: 0, key: 0}],
				],
				key: 500,
			}
		},
		computed: {
			height() {
				return this.scrollviewHeilght - 96 + 'px'
			}
		},
		methods: {
			toPage() {
				this.$slNavigateTo('/pages/home/chargeHistory');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charge-box {
		padding: 32rpx;
		padding-right: 0;
	}
	.charge-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #000000;
	}
	.charge-money {
		display: flex;
		justify-content: space-between;
		padding-top: 32rpx;
		.active {
			position: relative;
			color: #ee0a24!important;
			font-weight: bold!important;
			border: 2rpx solid #ee0a24!important;
			&::before {
				position: absolute;
				content: "";
				display: block;
				width: 56rpx;
				height: 56rpx;
				background: #ee0a24;
				border-radius: 0px 0px 0px 56rpx;
				right: 0;
				top: 0;
			}
			&::after {
				position: absolute;
				content: url(../../static/image/success.png);
				display: block;
				right: -8rpx;
				top: -8rpx;
			}
			.charge-money-1 {
				color: #ee0a24!important;
				font-weight: bold!important;
			}
			.charge-money1 {
				background-color: #fce9e2!important;
			}
		}
		.charge-money-item {
			overflow: hidden;
			height: 208rpx;
			border-radius: 16rpx;
			border: 2rpx solid #999999;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 32rpx;
			flex: 1;
			.charge-money-12 {
				.charge-money-1 {
					font-size: 56rpx;
					font-weight: bold;
					color: #000000;
				}
				.charge-money-2 {
					font-size: 36rpx;
					padding-left: 4rpx;
				}
			}
			.charge-money1 {
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background-color: #f3f3f3;
				border-radius: 24rpx;
				width: 100%;
			}
		}
	}
	
	.charge-history {
		margin-top: 32rpx;
		text-align: center;
		padding-right: 32rpx;
		height: 72rpx;
		line-height: 72rpx;
	}
</style>
